<template>
  <div  class="main">
      <div class="content">
          <!-- logo -->
          <div class="logo">
              <h3>WaterGhost <span class="flag" @click="nav=!nav" :class="nav?'el-icon-s-fold':'el-icon-s-unfold'"></span><el-badge value="V 1.0" style="font-family:hw"></el-badge></h3>
              
          </div>
          <!-- 导航 -->
          <transition name="el-fade-in-linear">
          <div  class="nav" v-if="nav">
             <ul>
                 <li><router-link to="/community">社区</router-link></li>
                 <li><router-link  to="/">首页</router-link></li>
                 <li><router-link to="/contribute">投稿</router-link></li>
                 <li v-show="login==false"><a href="javascript:;"  @click="loginFlag=true">登录</a></li>
                 <li v-show="login">
                 <el-dropdown @command="outLogin">
                    <span class="el-dropdown-link">
                        <a style="font-size:15px">我的</a><i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu style="background:#ffcd35;width:200px" slot="dropdown">
                        <el-dropdown-item command="person">个人中心</el-dropdown-item>
                        <el-dropdown-item command="message">消息通知(0)</el-dropdown-item>
                        <el-dropdown-item command="out">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                 </el-dropdown>
                 </li>
             </ul>
          </div>
          </transition>
      </div>
      <el-dialog
        title="申请加入推使者"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
        <p>推使者玩法介绍：当您同意加入推使者活动时您就会进入到当前页面，获取到您的使者令牌，您可以凭借着你的使者令牌，给予您的好友，当您的好友使用您的令牌进行注册账号后，您将获得相对应的奖品！</p>
        <p>加入推使者必须同意以下几条条约：</p>
        <p style="color:red">1、推使者不得以任何作弊行为刷取奖品</p>
        <p style="color:red">2、一旦加入推使者即使账号注销后，推使者记录还进行记录</p>
        <p style="color:red">3、加入推使者后无法进行退出</p>
        <p>如果用户违反了以上几条条约，那么waterghost有权对用户扣除奖励以及追究法律责任</p>
        <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="susscee">同意</el-button>
        </span>
        </el-dialog>
    <Login  :flag="loginFlag" @close="loginFlag=false" @loginSeceess="login=true;loginFlag=false"></Login>

  </div>
</template>

<script>
import Login from '@/components/login/login'

export default {
    components:{Login},
    data(){
        return{
            nav:true,
            login:false,
            loginFlag:false,
            centerDialogVisible:false
        }
    },
    methods:{
        sb(){
            this.login=true
        },
        outLogin(comment){
            if(comment=="out"){
                sessionStorage.removeItem("TOKEN")
                sessionStorage.removeItem("BC")
                this.login=false
                this.$router.push("/")
            }
            if(comment=="person"){
                this.$router.push("/personcenter/my")
            }
        },
        popularaze(){
            // 查询用户是否有加入推使者
            // this.centerDialogVisible=true
            this.$alert("该功能正在开发中...")

        },
        susscee(){
            // 同意条约开辟用户推使者账号
            // 进入推使者页面
            this.centerDialogVisible=false;
            this.$router.push("/popularaze")
        }
    },
    created(){
        // 如果已登录状态那么login = true
        if(sessionStorage.getItem("TOKEN")!=null){
            this.login=true
        }
    }
}
</script>

<style scoped lang="less">
    .main{
        width: 100%;
        height: 80px;
        background: #fff;
        position:relative ;
        box-shadow: 2px 2px 2px rgb(204, 202, 202);
        .content{
            width: 60%;
            height: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            .logo{
                width: 50%;
                height: 100%;
                h3{
                    font-family: hw !important;
                    font-size: 40px;
                    line-height: 80px;
                    color: #000;
                    span{
                        font-size: 20px;
                        margin-left: 10px;
                        display:none;
                    }
                }
            }
            .nav{
                width: 50%;
                height: auto;
                z-index: 999;
                ul{
                    width: 100%;
                    height: 100%;
                    list-style: none;
                    li{
                        float: left;
                        text-align:center;
                        width: 25%;
                        line-height: 80px;
                        a{
                            color: #000;
                            text-decoration: none;
                        }
                        a:hover{
                            color: #fddd81;
                        }
                    }
                }
            }
        }
    }
    
  @media  screen and (max-width: 500px) {
    .main{
        // margin-bottom: 300px;
        width: 100% !important;
        height: auto !important;
    }
    .main .content{
        display: block;
        width: 100% !important;
        background: orange;
    }
    .logo{
        width: 100% !important;
    }
    .logo h3{
        text-align: center;
    }
    .nav{
        width: 100% !important;
    }
    .nav ul li {
        width: 100% !important;
        float: none !important;
    }
    .flag{
        display: inline-block !important;
    }
  }
</style>